import type { Directive } from 'vue'
import { pinia } from '@/store'
import useLoginStore from '@/store/login'

const loginStore = useLoginStore(pinia)

// 导出一个指令
export const permission: Directive = {
  // 指令绑定到元素时调用
  mounted(el: HTMLElement, binding: any) {
    // 调用工具函数，根据权限设置元素的显示状态
    toolPermission(el, binding.value)
  },
  // 指令更新时调用
  updated(el: HTMLElement, binding: any) {
    // 调用工具函数，根据权限设置元素的显示状态
    toolPermission(el, binding.value)
  }
}

// 工具函数，根据权限设置元素的显示状态
function toolPermission(el: HTMLElement, permission: string) {
  const [...perms] = loginStore.permissions
  if (perms.length === 0) return
  // 如果权限存在且在权限列表中
  if (permission && perms.includes(permission)) {
    // 设置元素的显示状态为block
    el.style.display = 'block'
  } else {
    // 否则设置元素的显示状态为none
    el.style.display = 'none'
  }
}
